import { Bar, Column, Pie, RadialBar } from '@ant-design/plots';
import React, { Fragment } from 'react';
import { countUserbyDept } from '../../services/userServices';
import { message } from 'antd/es';
import './index.css';
import PieChart from './pieChart';
import BarChart from './barChart';
import CloudChart from './cloudChart';

class Demo3 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.initData();
    this.state = {
      config: {
        data: [],
        xField: 'deptName',
        yField: 'userCount',
        sort: {
          reverse: true,
        },
        label: {
          text: 'userCount',
          formatter: '.1%',
          style: {
            textAlign: (d) => (+d.userCount > 0.008 ? 'right' : 'start'),
            fill: (d) => (+d.userCount > 0.008 ? '#fff' : '#000'),
            dx: (d) => (+d.userCount > 0.008 ? -5 : 5),
          },
        },
        axis: {
          y: {
            labelFormatter: '.0%',
          },
        },
      },
    };
  }

  initData = async () => {
    try {
      const response = await countUserbyDept();
      const { data } = response;
      message.info('countUser added successfully');
      this.setState({
        config: {
          ...this.state.config,
          data: data,
        },
      });
    } catch (error) {
      message.error(error.message || 'Failed to count user');
    }
  };


  render() {
    return (
      <Fragment>
        <div id="statistics-content">
          <div id="lefttop-content">
            <Bar {...this.state.config} />
          </div>
          <div id="righttop-content">
            <PieChart />
          </div>
          <div id="leftbottom-content">
            <CloudChart />
          </div>
          <div id="rightbottom-content">
            <BarChart />
          </div>
        </div>
      </Fragment>
    );
  }
}

export default Demo3;
